<!DOCTYPE html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>操作演示&Bootstrap样式</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
        <link rel="stylesheet" href="../examples/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="../src/mmGrid.css">
        <link rel="stylesheet" href="../src/theme/bootstrap/mmGrid-bootstrap.css">
        <link rel="stylesheet" href="../src/mmPaginator.css">
        <link rel="stylesheet" href="../src/theme/bootstrap/mmPaginator-bootstrap.css">
        <style>
            html,
            body{
                font-family: 'Helvetica Neue',helvetica, "Hiragino Sans GB",'Microsoft YaHei', "WenQuanYi Micro Hei", sans-serif;
                font-size: 12px;
                color: #444;
            }
            .btn{
                font-size: 13px;
            }
            .btnPrice {
                display: block;
                width: 16px;
                height: 16px;
                margin: 0px auto;
                background: url(img/botton_g1.gif) no-repeat;
            }

            .btnPrice:hover {
                background: url(img/botton_g2.gif) no-repeat;
            }
        </style>
    </head>
    <body style="padding: 40px;">
    <div class="grid_6">
        <h3 >例 2：使用AJAX加载数据</h3>
        <p class="well">
            AJAX数据为数据源。参数<em>url</em>为请求地址，返回数据为json格式，可以是对象或数组。如果返回数据为对象，则使用<em>root</em>选项标记对象内的数组字段为数据源。
        </p>
        <button  class="btn btn-info">查看</button>
        <table id="table2-2"></table>
        <div style="text-align:right;">
            <div id="paginator11-1"></div>
        </div>
    </div>

        <script src="js/vendor/jquery-1.9.1.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/vendor/json2.js"></script>
        <script src="../src/mmGrid.js"></script>
        <script src="../src/mmPaginator.js"></script>
        <script>
            $(document).ready(function(){
                //保留两位小数
                var fixed2 = function(val){
                    return val.toFixed(2);
                }

                //加百分号
                var fixed2percentage = function(val){
                    return fixed2(val)+'%';
                }
                //高亮
                var highliht = function(val){
                    if(val > 0){
                        return '<span style="color: #b00">' + fixed2(val) + '</span>';
                    }else if(val < 0){
                        return '<span style="color: #0b0">' + fixed2(val) + '</span>';
                    }
                    return fixed2(val);
                };
                //列
                var cols = [
                    {title:'行情', name:'', width: 50, align: 'center', renderer: function(val,item,rowIndex){
                        return '<div class="btnPrice"></div>';
                    }},
                    { title:'股票代码', name:'SECUCODE' ,width:100, align:'center', sortable: true },
                    { title:'股票名称', name:'SECUABBR' ,width:100, align:'center', sortable: true},
                    { title:'今收盘', name:'CLOSINGPRICE' ,width:60, align:'right', renderer: fixed2},
                    { title:'涨跌幅', name:'DAYCHANGERATE' ,width:60, align:'right',renderer: highliht},
                    { title:'涨跌额', name:'DAYCHANGE' ,width:60, align:'right', renderer: highliht},
                    { title:'振幅', name:'AMPLITUDE' ,width:60, align:'right', renderer: fixed2percentage},
                    { title:'成交量(手)', name:'TURNOVERVOL' ,width:100, align:'right', renderer: function(val){
                        return (val / 100).toFixed(2);
                    }},
                    { title:'成交额(万)', name:'TURNOVERVAL' ,width:100, align:'right', renderer: function(val){
                        return (val / 10000).toFixed(2);
                    }},
                    { title:'昨收盘', name:'PREVCLOSINGPRICE' ,width:60, align:'right', renderer: fixed2},
                    { title:'今开盘', name:'OPENINGPRICE',width:60, align:'right', renderer: fixed2},
                    { title:'最高价', name:'HIGHESTPRICE' ,width:60, align:'right', renderer: fixed2},
                    { title:'最低价', name:'LOWESTPRICE' ,width:60, align:'right', renderer: fixed2}
                ];
                //AJAX示例
               var mmg =  $('#table2-2').mmGrid({
                    cols: cols,
                    url: 'data/stockQuotePage.json',
                    method: 'post',
                    remoteSort:true ,
                    sortName: 'SECUCODE',
                    sortStatus: 'asc',
                    root: 'items',
                    fullWidthRows:true,
                    plugins : [
                        $('#paginator11-1').mmPaginator()
                    ],
                    checkCol:true,
                    indexCol:true,
                    multiSelect:true

                });

                $('.btn-info').on('click',function(){
                    //点击查询时页码置为1
                    var data = mmg.selectedRows();
//                    alert(data);
                    for(var i=0;i<data.length;i++) {
                        console.log(data[i].BVPS);
//                        alert(JSON.stringify(data[i]));
                    }
                    mmg.load({page: 1});
                });
            });
        </script>
    </body>
</html>
